<template>
  <div class="detail">
    <!--    navbar-->
    <div class="navbar">
      <van-nav-bar
        fixed
        left-arrow
        title="商品詳情頁"
        @click-left="$router.back()"
      />
    </div>
    <!--    輪播-->
    <div class="swipe">
      <van-swipe
        :autoplay="3000"
        indicator-color="white"
        show-indicators
        touchable
        @change="onChange"
      >
        <van-swipe-item v-for="(item, index) in images" :key="index">
          <img :src="item.external_url" alt="" width="100%" />
        </van-swipe-item>
        <template #indicator>
          <div class="custom-indicator">{{ current + 1 }}/{{ imgLength }}</div>
        </template>
      </van-swipe>
    </div>
    <!--    商品標題-->
    <div class="title">
      <div class="line-1">
        <p class="price-left">￥{{ detailList.goods_price_min }}</p>
        <p class="price-right">已售{{ detailList.goods_sales }}件</p>
      </div>
      <p class="name-p">{{ detailList.goods_name }}</p>
      <van-cell
        is-link
        style="display: flex; align-items: center; background-color: #fafafa"
        @click="showPopup"
      >
        <div class="line-2">
          <div class="line2-left">
            <div class="icon-p">
              <van-icon color="#FA2D16" name="certificate" />
              <p>七天無理由退貨</p>
            </div>
            <div class="icon-p">
              <van-icon color="#FA2D16" name="certificate" />
              <p>48小時發貨</p>
            </div>
          </div>
        </div>
      </van-cell>
      <van-popup
        v-model="show"
        :style="{ height: '30%' }"
        closeable
        position="bottom"
        round
      >
        <h3>服務</h3>
        <div>
          <div>
            <p>
              <van-icon color="#FA2D16" name="certificate" />
              七天無理由退貨
            </p>
            <p class="p-6D6D6D">滿足相應條件時，消費者可申請7天無理由退貨</p>
          </div>
          <div>
            <p>
              <van-icon color="#FA2D16" name="certificate" />
              48小時發貨
            </p>
            <p class="p-6D6D6D">下單后48小時之内發貨</p>
          </div>
        </div>
      </van-popup>
    </div>
    <div class="comment">
      <div class="title">
        <p>商品評價（{{ total }}條）</p>
        <p>
          查看更多
          <van-icon name="arrow" />
        </p>
      </div>
      <div
        v-for="(item, index) in commentList"
        :key="index"
        class="comment-box"
      >
        <div style="display: flex; align-items: center">
          <img
            :src="item.user.avatar_url"
            alt=""
            style="width: 50px; height: 50px; margin-right: 10px"
          />
          <p style="width: 25%">{{ item.user.nick_name }}</p>
          <van-rate
            :size="25"
            :value="item.score"
            color="#F4A213"
            void-color="#eee"
            void-icon="star"
          />
        </div>
        <p class="content-text">{{ item.content }}</p>
        <p style="color: #999999">{{ item.create_time }}</p>
      </div>
    </div>
    <!--    商品介紹-->
    <p style="padding: 5px 10px">商品描述</p>
    <div class="detail-img" v-html="detailList.content"></div>
    <!--    tabbar-->
    <div class="tabbar-div">
      <div class="icon-div">
        <div class="block-div">
          <van-icon name="wap-home-o" />
          <p @click="$router.push('/index')">首頁</p>
        </div>
        <div class="block-div">
          <van-icon name="shopping-cart-o" />
          <p @click="$router.push('/cart')">購物車</p>
        </div>
      </div>
      <div class="btn-div">
        <van-button
          color="linear-gradient(to right, #FFA700, #FFBA00)"
          round
          @click="showcartY"
        >
          加入購物車
        </van-button>
        <van-popup
          v-model="show_cart"
          :style="{ height: '30%' }"
          close-icon="close"
          closeable
          position="bottom"
          round
        >
          <div class="cart-div">
            <div class="cart-topline">
              <img :src="detailList.goods_image" alt="" width="30%" />
              <div class="price-total">
                <p class="price-p">￥{{ detailList.goods_price_max }}</p>
                <p>庫存：{{ detailList.stock_total }}</p>
              </div>
            </div>
            <div class="cart-bottomline">
              <p>數量</p>
              <van-stepper v-model="Steppervalue" />
            </div>
            <div class="cart-btn-div">
              <div v-if="detailList.stock_total > 0">
                <van-button
                  v-if="btnMode == 'Y'"
                  class="cart-btn"
                  color="linear-gradient(to right, #FFA700, #FFBA00)"
                  round
                  @click="getInCart()"
                >
                  加入購物車
                </van-button>
                <van-button
                  v-else
                  class="cart-btn"
                  color="linear-gradient(to right, #F9231D, #FF6134)"
                  round
                  @click="getBuyNow()"
                >
                  立即購買
                </van-button>
              </div>
              <div v-else>
                <van-button class="cart-btn" color="#CDCBCD" disabled round
                  >該商品已搶完
                </van-button>
              </div>
            </div>
          </div>
        </van-popup>
        <van-button
          color="linear-gradient(to right, #F9231D, #FF6134)"
          round
          @click="showcartR"
        >
          立即購買
        </van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getCommentData, getDetailData } from "@/api/searchList";

export default {
  name: "detailCom",
  components: {},
  data() {
    return {
      current: 0,
      detailList: [],
      images: [],
      imgLength: 0,
      show: false,
      show_cart: false,
      btnMode: "Y",
      commentList: [],
      limit: 2,
      total: 0, //評價總數
      Steppervalue: 1,
    };
  },
  computed: {
    goodsId() {
      return this.$route.params.goodsId;
    },
  },
  methods: {
    getInCart() {
      this.$toast("已加入購物車");
      this.show_cart = false;
      console.log("getincart");
    },
    getBuyNow() {},
    //輪播圖
    onChange(index) {
      this.current = index;
    },
    //彈出層
    showPopup() {
      this.show = true;
    },
    showcartY() {
      this.show_cart = true;
      this.btnMode = "Y";
    },
    showcartR() {
      this.show_cart = true;
      this.btnMode = "R";
    },
    //獲取詳細商品數據
    async getDetailList() {
      const {
        data: {
          data: { detail },
        },
      } = await getDetailData(this.goodsId);
      console.log(detail);
      this.detailList = detail;
      this.images = detail.goods_images;
      this.imgLength = detail.goods_images.length;
    },
    //獲取評論
    async getCommentList() {
      const {
        data: {
          data: { list, total },
        },
      } = await getCommentData(this.goodsId, this.limit);
      this.commentList = list;
      this.total = total;
    },
  },
  created() {
    this.getDetailList();
    this.getCommentList();
  },
};
</script>
<style lang="less">
.detail {
  .navbar {
  }

  .swipe {
    margin-top: 50px;

    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      margin: 0 10px 10px 0;
      padding: 2px 5px;
      font-size: 12px;
      border-radius: 14px;
      color: #fff;
      background: rgba(0, 0, 0, 0.363);
    }
  }

  .title {
    .line-1 {
      padding: 5px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price-left {
        color: #fa2209;
        font-size: 25px;
      }

      .price-right {
        color: #959595;
        font-size: 12px;
      }
    }

    .name-p {
      padding: 5px 10px;
      font-weight: bold;
    }

    .line-2 {
      padding: 5px 10px;
      display: flex;
      justify-content: space-between;
      height: 30px;
      align-items: center;

      .line2-left {
        display: flex;

        .icon-p {
          display: flex;
          align-items: center;
          margin-right: 10px;
        }
      }

      .line2-right {
      }
    }

    .van-popup {
      padding: 10px;

      h3 {
        text-align: center;
        margin-bottom: 20px;
      }

      .p-6D6D6D {
        color: #6d6d6d;
        margin: 5px 20px 10px;
      }
    }
  }

  .comment {
    padding: 5px 10px;

    .title {
      display: flex;
      justify-content: space-between;
    }

    .comment-box {
      margin-top: 10px;
      border-bottom: 1px solid #f5f5f5;
      padding: 10px 0;

      .content-text {
        margin: 10px 0;
      }
    }
  }

  .tabbar-div {
    background-color: #fff;
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 5px;

    .icon-div {
      width: 30%;
      display: flex;
      justify-content: space-around;

      .block-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        p {
          font-size: 12px;
        }
      }
    }

    .btn-div {
      display: flex;
      justify-content: space-around;
      width: 70%;

      .cart-div {
        padding: 20px;

        .cart-topline {
          display: flex;
          align-items: center;

          .price-total {
            margin-left: 20px;

            .price-p {
              color: #fe560a;
              font-size: 25px;
            }
          }
        }

        .cart-bottomline {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
        }

        .cart-btn-div {
          margin-top: 20px;

          .cart-btn {
            width: 100%;
          }
        }
      }

      .van-button {
        width: 49%;
        margin: 0 1px;
      }
    }
  }
}
</style>
